import Taro from '@tarojs/taro';
import { useAgentSelector, useDispatchAgent } from "@/hooks/agent";
import {Button, Empty, Loading, Navbar, Search, Tabs} from "@taroify/core";
import { View } from "@tarojs/components";
import {useEffect, useState} from "react";
import {AgentDiscoverCard, CustomTabbar} from "@/components";
import {useDispatchGlobalState} from "@/hooks/global";
import {isLogin} from "@/utils/auth";
import {useDispatchUser, useUserSelector} from "@/hooks/user";
import './index.css';


export default function Discover() {
  const windowInfo = Taro.getWindowInfo();
  const statusBarHeight = windowInfo.statusBarHeight;
  const dispatchGlobal = useDispatchGlobalState();
  const dispatchAgent = useDispatchAgent();
  const dispatchUser = useDispatchUser();
  const agents = useAgentSelector((state) => state.agent.publicAgents);
  const agentStatus = useAgentSelector((state) => state.agent.status);
  const userDetail = useUserSelector((state) => state.user.user);
  const [addAgentUuids, setAddAgentUuids] = useState<string[]>([]);
  const [searchValue, setSearchValue] = useState("")
  const is_login = isLogin()
  useEffect(() => {
    if(is_login){
      dispatchUser.fetchUser()
      dispatchAgent.getAllPublicAgents()
      dispatchGlobal.changeTab('discover')
    }
  }, [is_login]);

  useEffect(() => {
    if(! userDetail) return
    const uuids = userDetail?.add_agents?.map(agent => agent.uuid) || [];
    setAddAgentUuids(uuids);
  }, [userDetail?.add_agents]);


  return (
    <View style={{ height: '100vh', width: '100vw', backgroundColor: 'white'}}>
      {/* 导航栏 */}
      <Navbar
        fixed
        style={{
          paddingTop: `${(statusBarHeight || 0) + 50}rpx`,
          background: 'linear-gradient(-225deg, #2CD8D5 0%, #C5C1FF 56%, #FFBAC3 100%)',
          boxShadow: '0 2rpx 10rpx rgba(0, 0, 0, 0.1)',
        }}
      >
        <Navbar.Title style={{ fontSize: '35rpx', color: 'black', fontWeight: 'bold'}}>发现数字教师</Navbar.Title>
      </Navbar>
      <View style={{ paddingTop: `${(statusBarHeight || 0) + 150}rpx`, width: '100%', height: `calc(100% - ${(statusBarHeight || 0) + 250}rpx)`, overflow: 'auto' }}>
        {is_login ? <View style={{overflow: 'auto', display: 'flex', flexDirection: 'column'}}>
          <Search
            value={searchValue}
            placeholder='搜索数字教师'
            onChange={(e) => setSearchValue(e.detail.value)}
          />
          <Tabs>
              <Tabs.TabPane title='推荐' />
              <Tabs.TabPane title='精选' />
              <Tabs.TabPane title='学习' />
              <Tabs.TabPane title='绘画' />
              <Tabs.TabPane title='游戏' />
              <Tabs.TabPane title='工作' />
              <Tabs.TabPane title='生活' />
              <Tabs.TabPane title='情感' />
              <Tabs.TabPane title='趣味' />
              <Tabs.TabPane title='上新' />
          </Tabs>
          {/* 主体内容 */}
          <View style={{ width: '100%', height: `calc(100% - ${(statusBarHeight || 0) + 150}rpx)`, overflowY: 'auto' }}>
            <View style={{width:'100%'}}>
              {agents.items.map((item, index) => (
                <AgentDiscoverCard key={index} agent={item} added={addAgentUuids.includes(item.uuid)} />
              ))}
              {agentStatus === 'loading' && <Loading>加载中...</Loading>}
            </View>
          </View>
        </View>:
        <View style={{display: "flex", width: '100%', justifyContent: 'center'}}>
          <Empty>
            <Empty.Image />
            <Empty.Description>暂无智能教师</Empty.Description>
            <Button
              shape='round'
              style={{
                marginTop: '100rpx',
                background: 'linear-gradient(135deg, #6a11cb, #2575fc)',
                color: '#fff',
                borderRadius: '50rpx',
                padding: '20rpx 60rpx',
                boxShadow: '0 4rpx 10rpx rgba(0, 123, 255, 0.3)',
              }}
              onClick={() => Taro.redirectTo({
                url: `/pages/auth/WxLogin/index`,
              })}
            >前去登录，开启完整体验</Button>
          </Empty>
        </View>}
      </View>
      <CustomTabbar />
    </View>
  );
}
